import React from 'react';
import ReactEcharts from 'echarts-for-react';

var createReactClass = require('create-react-class');
const Ydgjxx = createReactClass({
  propTypes: {},
  getOtion: function() {
    const option = {
      tooltip: {
        position: 'top',
      },
      calendar: [
        {
          orient: 'vertical',
          cellSize: 35,
          range: '2020-12',
          dayLabel: {
            color: 'white',
            nameMap: 'cn',
          },
          yearLabel: {
            show: false,
          },
          monthLabel: {
            color: 'white',
            nameMap: 'cn',
          },
        },
      ],

      series: [
        {
          type: 'scatter',
          coordinateSystem: 'calendar',
          calendarIndex: 0,
          symbolSize: function(val: any) {
            return val[1] * 3;
          },
          data: [
            ['2020-12-01', 4],
            ['2020-12-02', 1],
            ['2020-12-03', 2],
            ['2020-12-04', 2],
            ['2020-12-05', 0],
            ['2020-12-06', 0],
            ['2020-12-07', 3],
            ['2020-12-08', 1],
            ['2020-12-09', 2],
            ['2020-12-10', 0],
            ['2020-12-11', 0],
            ['2020-12-12', 0],
            ['2020-12-13', 0],
            ['2020-12-14', 0],
            ['2020-12-15', 0],
            ['2020-12-16', 0],
            ['2020-12-17', 0],
            ['2020-12-18', 0],
            ['2020-12-19', 0],
            ['2020-12-20', 0],
            ['2020-12-21', 0],
            ['2020-12-22', 0],
            ['2020-12-23', 0],
            ['2020-12-24', 0],
            ['2020-12-25', 0],
            ['2020-12-26', 0],
            ['2020-12-27', 0],
            ['2020-12-28', 0],
            ['2020-12-29', 0],
            ['2020-12-30', 0],
            ['2020-12-31', 0],
          ],
        },
      ],
    };
    return option;
  },
  render: function() {
    return (
      <ReactEcharts
        option={this.getOtion()}
        theme="dark"
        style={{ height: '99%', width: '100%' }}
        className="react_for_echarts"
      />
    );
  },
});

export default Ydgjxx;
